<template>
  <div class="report-center">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>报表中心</span>
        </div>
      </template>
      
      <el-tabs v-model="activeTab">
        <el-tab-pane label="销售报表" name="sales">
          <el-form :inline="true" :model="salesForm" class="search-form">
            <el-form-item label="日期范围">
              <el-date-picker
                v-model="salesForm.dateRange"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="generateSalesReport">生成报表</el-button>
              <el-button @click="exportSalesReport">导出Excel</el-button>
            </el-form-item>
          </el-form>
          
          <el-table :data="salesData" style="width: 100%" v-loading="loading">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="orderCount" label="订单数" width="100" />
            <el-table-column prop="customerCount" label="客流量" width="100" />
            <el-table-column prop="salesAmount" label="销售额" width="120">
              <template #default="scope">
                ¥{{ scope.row.salesAmount }}
              </template>
            </el-table-column>
            <el-table-column prop="avgOrderAmount" label="客单价" width="100">
              <template #default="scope">
                ¥{{ scope.row.avgOrderAmount }}
              </template>
            </el-table-column>
            <el-table-column prop="popularDish" label="热销菜品" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="菜品报表" name="dishes">
          <el-form :inline="true" :model="dishesForm" class="search-form">
            <el-form-item label="日期范围">
              <el-date-picker
                v-model="dishesForm.dateRange"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="dishesForm.category" placeholder="请选择分类" clearable>
                <el-option label="川菜" value="川菜" />
                <el-option label="粤菜" value="粤菜" />
                <el-option label="湘菜" value="湘菜" />
                <el-option label="鲁菜" value="鲁菜" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="generateDishesReport">生成报表</el-button>
              <el-button @click="exportDishesReport">导出Excel</el-button>
            </el-form-item>
          </el-form>
          
          <el-table :data="dishesData" style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="菜品名称" />
            <el-table-column prop="category" label="分类" width="100" />
            <el-table-column prop="salesCount" label="销售数量" width="100" />
            <el-table-column prop="salesAmount" label="销售额" width="120">
              <template #default="scope">
                ¥{{ scope.row.salesAmount }}
              </template>
            </el-table-column>
            <el-table-column prop="cost" label="成本" width="100">
              <template #default="scope">
                ¥{{ scope.row.cost }}
              </template>
            </el-table-column>
            <el-table-column prop="profit" label="利润" width="100">
              <template #default="scope">
                ¥{{ scope.row.profit }}
              </template>
            </el-table-column>
            <el-table-column prop="profitMargin" label="利润率" width="100">
              <template #default="scope">
                {{ scope.row.profitMargin }}%
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="库存报表" name="inventory">
          <el-form :inline="true" class="search-form">
            <el-form-item>
              <el-button type="primary" @click="generateInventoryReport">生成报表</el-button>
              <el-button @click="exportInventoryReport">导出Excel</el-button>
            </el-form-item>
          </el-form>
          
          <el-table :data="inventoryData" style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="食材名称" />
            <el-table-column prop="category" label="分类" width="120" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="currentStock" label="当前库存" width="100" />
            <el-table-column prop="minStock" label="最低库存" width="100" />
            <el-table-column prop="maxStock" label="最高库存" width="100" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getStockStatusType(scope.row.status)">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 活动标签页
const activeTab = ref('sales')

// 销售报表表单
const salesForm = reactive({
  dateRange: []
})

// 菜品报表表单
const dishesForm = reactive({
  dateRange: [],
  category: ''
})

// 数据状态
const loading = ref(false)

// 模拟销售数据
const salesData = ref([
  { date: '2025-10-25', orderCount: 128, customerCount: 86, salesAmount: 12856, avgOrderAmount: 100.4, popularDish: '宫保鸡丁' },
  { date: '2025-10-26', orderCount: 142, customerCount: 92, salesAmount: 15230, avgOrderAmount: 107.3, popularDish: '麻婆豆腐' },
  { date: '2025-10-27', orderCount: 136, customerCount: 89, salesAmount: 14680, avgOrderAmount: 108.0, popularDish: '北京烤鸭' },
  { date: '2025-10-28', orderCount: 158, customerCount: 102, salesAmount: 18650, avgOrderAmount: 117.9, popularDish: '西湖醋鱼' },
  { date: '2025-10-29', orderCount: 145, customerCount: 95, salesAmount: 16240, avgOrderAmount: 112.0, popularDish: '东坡肉' }
])

// 模拟菜品数据
const dishesData = ref([
  { name: '宫保鸡丁', category: '川菜', salesCount: 128, salesAmount: 3840, cost: 1280, profit: 2560, profitMargin: 66.7 },
  { name: '麻婆豆腐', category: '川菜', salesCount: 96, salesCount: 96, salesAmount: 1920, cost: 480, profit: 1440, profitMargin: 75.0 },
  { name: '北京烤鸭', category: '京菜', salesCount: 64, salesAmount: 6400, cost: 3200, profit: 3200, profitMargin: 50.0 },
  { name: '西湖醋鱼', category: '浙菜', salesCount: 48, salesAmount: 2400, cost: 1200, profit: 1200, profitMargin: 50.0 },
  { name: '东坡肉', category: '浙菜', salesCount: 42, salesAmount: 1260, cost: 630, profit: 630, profitMargin: 50.0 }
])

// 模拟库存数据
const inventoryData = ref([
  { name: '鸡胸肉', category: '肉类', unit: 'kg', currentStock: 50, minStock: 20, maxStock: 100, status: '正常' },
  { name: '豆腐', category: '豆制品', unit: '块', currentStock: 15, minStock: 30, maxStock: 100, status: '低于最低库存' },
  { name: '鸭子', category: '禽类', unit: '只', currentStock: 8, minStock: 5, maxStock: 20, status: '正常' },
  { name: '草鱼', category: '水产', unit: 'kg', currentStock: 25, minStock: 20, maxStock: 50, status: '正常' },
  { name: '五花肉', category: '肉类', unit: 'kg', currentStock: 12, minStock: 15, maxStock: 40, status: '低于最低库存' }
])

// 获取库存状态标签类型
const getStockStatusType = (status) => {
  const statusMap = {
    '正常': 'success',
    '低于最低库存': 'warning',
    '高于最高库存': 'danger'
  }
  return statusMap[status] || ''
}

// 生成销售报表
const generateSalesReport = () => {
  loading.value = true
  ElMessage.info('正在生成销售报表...')
  setTimeout(() => {
    loading.value = false
    ElMessage.success('销售报表生成成功')
  }, 1000)
}

// 导出销售报表
const exportSalesReport = () => {
  ElMessage.success('销售报表已导出')
}

// 生成菜品报表
const generateDishesReport = () => {
  loading.value = true
  ElMessage.info('正在生成菜品报表...')
  setTimeout(() => {
    loading.value = false
    ElMessage.success('菜品报表生成成功')
  }, 1000)
}

// 导出菜品报表
const exportDishesReport = () => {
  ElMessage.success('菜品报表已导出')
}

// 生成库存报表
const generateInventoryReport = () => {
  loading.value = true
  ElMessage.info('正在生成库存报表...')
  setTimeout(() => {
    loading.value = false
    ElMessage.success('库存报表生成成功')
  }, 1000)
}

// 导出库存报表
const exportInventoryReport = () => {
  ElMessage.success('库存报表已导出')
}
</script>

<style scoped>
.card-header {
  font-weight: bold;
}

.search-form {
  margin-bottom: 20px;
}
</style>